<template>
  <div class="rentadd">
    <div class="dialog" v-show="falg"></div>
    <van-picker
      v-show="falg"
      show-toolbar
      :columns="columns"
      :default-index="0"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
    <header>
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span>发布房源</span>
      <span></span>
    </header>
    <main>
      <div class="main_add">
        <p>房源信息</p>
        <div class="main_add_list">
          <div class="add_list" @click="onFinish">
            <p>小区名称</p>
            <input
              v-model="queryInfo.community"
              :disabled="Shows"
              type="text"
              placeholder="请输入小区名称"
            />
            <span><van-icon name="arrow" /></span>
          </div>
          <div class="add_lists">
            <p>租&emsp;&emsp;金</p>
            <input
              v-model="queryInfo.price"
              type="text"
              placeholder="请输入租金/月"
            />
            <span>￥/月</span>
          </div>
          <div class="add_lists">
            <p>建筑面积</p>
            <input
              v-model="queryInfo.description"
              type="text"
              placeholder="请输入建筑面积"
            />
            <span>m</span>
          </div>
          <div class="add_list" @click="openChange">
            <p>户&emsp;&emsp;型</p>
            <input
              v-model="queryInfo.roomType"
              readonly
              unselectable="on"
              type="text"
              placeholder="请选择"
            />
            <span><van-icon name="arrow" /></span>
          </div>
          <div class="add_list" @click="openChangeFooer">
            <p>所在楼层</p>
            <input
              v-model="queryInfo.floor"
              readonly
              unselectable="on"
              type="text"
              placeholder="请选择"
            />
            <span><van-icon name="arrow" /></span>
          </div>
          <div class="add_list" @click="openChangeFang">
            <p>朝&emsp;&emsp;向</p>
            <input
              v-model="queryInfo.oriented"
              readonly
              unselectable="on"
              type="text"
              placeholder="请选择"
            />
            <span><van-icon name="arrow" /></span>
          </div>
        </div>
      </div>
      <div class="main_title">
        <p>房屋标题</p>
        <div class="title_input">
          <input
            type="text"
            v-model="queryInfo.title"
            placeholder="请输入标题(例如：整租 小区名 2室 5000元)"
          />
        </div>
      </div>
      <div class="main_img">
        <p>房屋图像</p>
        <div class="img_input">
          <van-uploader v-model="queryInfo.houseImg" multiple />
        </div>
      </div>
      <div class="main_list">
        <p>房屋配置</p>
        <div class="main_list_item" @click="clickSpan($event)">
          <span>衣柜</span>
          <span>洗衣机</span>
          <span>空调</span>
          <span>天然气</span>
          <span>冰箱</span>
          <span>暖气</span>
          <span>电视</span>
          <span>热水器</span>
          <span>宽带</span>
          <span>沙发</span>
        </div>
      </div>
      <div class="main_desc">
        <p>房屋描述</p>
        <div class="desc_input">
          <van-field
            v-model="queryInfo.content"
            rows="3"
            autosize
            type="textarea"
            placeholder="请输入房屋描述信息"
            show-word-limit
          />
        </div>
      </div>
    </main>
    <footer>
      <p @click="Cancel">取消</p>
      <p @click="Submit">提交</p>
    </footer>
    <div v-show="show" class="wrap">
      <div class="busi">
        <h6 class="h6">提示</h6>
        <div class="t">放弃发布房源？</div>
        <div class="button">
          <button @click="qu" class="left-btn">放弃</button>
          <hr />
          <button @click="que" class="right-btn">继续编辑</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      falg: false,
      show: false,
      Shows: false,
      columns: [],
      queryInfo: {
        community: "",
        content: "",
        description: "",
        floor: "",
        houseImg: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
        oriented: [],
        price: "",
        roomType: "",
        size: "333",
        supporting: [],
        tags: [],
        title: "",
      },
    };
  },
  created() {
    this.Shows = true;
    this.queryInfo.community = window.localStorage.getItem("community");
  },
  methods: {
    clickSpan(e) {
      this.queryInfo.supporting.push(e.target.innerHTML);
      e.target.style.color = "#21b97a";
      this.queryInfo.supporting = [...new Set(this.queryInfo.supporting)];
    },
    onConfirm(value, index) {
      if (this.columns.length === 5) {
        this.queryInfo.roomType = value;
      } else if (this.columns.length === 3) {
        // console.log(value);
        this.queryInfo.floor = value;
      } else {
        this.queryInfo.oriented[0] = value;
      }
      this.falg = false;
    },
    openChange() {
      this.columns = ["一室", "二室", "三室", "四室", "四室+"];
      this.falg = true;
    },
    qu() {
      this.show = false;
      this.$router.push("/home/profile");
    },
    que() {
      this.show = false;
    },
    Submit() {
      window.localStorage.setItem("community", '');
      this.$router.push('/home/profile')
      console.log(this.queryInfo);
    },
    openChangeFooer() {
      this.falg = true;
      this.columns = ["高楼层", "中楼层", "低楼层"];
    },
    openChangeFang() {
      this.falg = true;
      this.columns = ["东", "西", "南", "北", "东南", "东北", "西南", "西北"];
    },
    onCancel() {
      this.falg = false;
    },
    onFinish() {
      this.$router.push("/rent/search");
    },
    Cancel() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
.main_list_item {
  width: 100%;
  padding-bottom: 20px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.main_list_item span {
  width: 20%;
  height: 45px;
  flex-shrink: 0;
  text-align: center;
  line-height: 45px;
}
.wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.busi {
  width: 270px;
  height: 141px;
  background: #fff;
  border-radius: 10px;
  margin: 70% auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.h6 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
}
.t {
  font-size: 15px;
  color: #888;
}
.button {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.button button {
  width: 134px;
  height: 50px;
  border: 0;
  background: #fff;
  font-size: 15px;
  border-top: 1px solid #ddd;
}
.left-btn {
  border-radius: 0 0 0 10px;
}
.right-btn {
  border-radius: 0 0 10px 0;
  color: cornflowerblue;
}
.title_input {
  width: 100%;
  height: 45px;
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-left: 15px;
}
.title_input input {
  border: 0;
  outline: none;
  flex: 1;
  font-size: 14px;
}
.main_desc {
  margin-bottom: 100px;
}
.main_title p,
.main_list p,
.main_desc p,
.main_img p {
  width: 100%;
  color: #333;
  font-size: 14px;
  background: #fff;
  padding: 15px 15px 9px;
  border-bottom: 1px solid #ddd;
}
.dialog {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background: rgba(0, 0, 0, 0.3);
}
.van-picker {
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 99;
}
.add_list {
  border-bottom: 1px solid #ddd;
  padding-left: 15px;
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  color: #666;
  font-size: 15px;
}
.add_list span {
  width: 40px;
  height: 30px;
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_list input {
  flex: 1;
  outline: none;
  border: 0;
  text-align: end;
  background: #fff;
  font-size: 14x;
}
.add_lists {
  border-bottom: 1px solid #ddd;
  font-size: 15px;
  padding-left: 15px;
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  color: #666;
}
.add_lists span {
  width: 40px;
  height: 30px;
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_lists input {
  flex: 1;
  outline: none;
  border: 0;
  text-indent: 15px;
  background: #fff;
  font-size: 14px;
}
.rentadd {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rentadd main {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}
.main_add > p {
  color: #21b97a;
  background-color: #fff;
  font-size: 15px;
  padding: 15px 15px 9px;
  width: 100%;
}
.van-field__body > input {
  text-align: right;
}
.main_add_list {
  position: relative;
  background-color: #fff;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rentadd header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #f6f5f6;
}
.rentadd footer {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
}
.rentadd footer p {
  width: 50%;
  height: 100%;
  font-size: 15px;
  text-align: center;
  line-height: 45px;
}
.rentadd footer p:first-child {
  color: #21b97a;
  background-color: #fff;
}
.rentadd footer p:last-child {
  background-color: #21b97a;
  color: #fff;
}
</style>